<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="废品类型">
          <el-input v-model="searchInfo.waste_type_id" placeholder="废品类型" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table :data="tableData" row-key="id">
        <el-table-column align="left" label="废品ID" min-width="150" prop="id" />
        <el-table-column align="left" label="废品类型ID" min-width="150" prop="waste_type_id" />
        <el-table-column align="left" label="废品名称" min-width="150" prop="waste_name" />
        <el-table-column align="left" label="废品价格" min-width="150" prop="waste_amount" />
        <el-table-column align="left" label="废品重量" min-width="150" prop="waste_pounds" />
        <el-table-column align="left" label="发布时间" min-width="150" prop="created_at" />
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="page_size"
          :page-sizes="[10, 30, 50, 100]"
          :total="totals"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";

import { order_branches_list } from "@/api/order";

let searchInfo = ref({
  waste_type_id: "",
  phone: "",
  order_no: ""
});
let tableData = ref([]);
let totals = ref(0);
let page = ref(1);
let page_size = ref(10);

onMounted(() => {
  getList();
});

const getList = () => {
  let params = {
    page: page.value,
    page_size: page_size.value,
    waste_type_id: searchInfo.value.waste_type_id
      ? Number(searchInfo.value.waste_type_id)
      : undefined
  };
  order_branches_list(params).then(response => {
    if (response.code === 0) {
      tableData.value = response.data.list || [];
      totals.value = response.data.total || 0;
    }
  });
};
const handleCurrentChange = val => {
  page.value = val;
  getList();
};
const handleSizeChange = val => {
  page_size.value = val;
  getList();
};
const onSubmit = () => {
  page.value = 1;
  page_size.value = 10;
  getList();
};
const onReset = () => {
  searchInfo.value = {
    waste_type_id: "",
    phone: ""
  };
  page.value = 1;
  page_size.value = 10;
  totals.value = 0;
  getList();
};
</script>
<style>
</style>